<template>
  <div>
    <div class="article">
      <div v-if="articles.length==0">暂无数据</div>
      <div class="article_border" v-bind:key="article.article_id" v-for="article in articles">
        <div @click="goToDetail(article.article_id)" class="title">{{article.article_title}}</div>
        <div>
          作者: {{article.user_nickname}}
          日期: {{article.date}}
        </div>

        <div class="subcontent">摘要: {{article.article_content}}</div>
      </div>
    </div>
    <div v-if="totalPage>0" class="page-row">
      <span>共 {{totalSize}} 条数据，当前第{{pageNo}}页</span>
      <div class="page-nums">
        <span
          :class="{curPageStyle: n==pageNo}"
          @click="getPageArticles(n)"
          class="page-num"
          v-bind:key="n"
          v-for="n in totalPage"
        >{{ n }}</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Home",
  data() {
    return {
      articles: [],
      totalSize: 0,
      totalPage: 0,
      pageSize: 20,
      pageNo: 1
    };
  },
  created: function() {
    this.getArticles(this.pageNo);
    this.getTotalSize();
  },
  methods: {
    getArticles: function(pageNo) {
      this.pageNo = pageNo;
      let _this = this;
      this.$axios
        .get("blog/getArticles", {
          // 还可以直接把参数拼接在url后边
          params: {
            pageNo: pageNo
          }
        })
        .then(function(res) {
          _this.articles = res.data;
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    getTotalSize: function() {
      let _this = this;
      this.$axios
        .get("blog/getTotalSize", {})
        .then(function(res) {
          _this.totalSize = res.data;
          _this.totalPage = Math.ceil(_this.totalSize / _this.pageSize);
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    getPageArticles: function(pageNo) {
      if (pageNo == this.pageNo) return;
      this.getArticles(pageNo);
    },
    goToDetail(id) {
      this.$router.push({ path: "detail", query: { id: id } });
    }
  }
};
</script>

<style scoped>
* {
  text-align: left;
}
.article {
  width: 50%;
  padding: 5px 25px;
  min-width: 300px;
  margin: 0 auto;
  background: #eee;
  font-size: 14px;
}
.article_border {
  border-bottom: 1px solid #ccc;
  padding-bottom: 20px;
}
.article_border:last-child {
  border-bottom: none;
}
.title {
  font-size: 20px;
  color: cadetblue;
  margin-top: 15px;
  cursor: pointer;
}
.subcontent {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.page-row {
  border-top: 1px solid #eee;
  overflow: hidden;
  margin-top: 50px;
  padding: 15px;
  font-size: 12px;
  color: dimgrey;
}
.page-nums {
  float: right;
}
.page-num {
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 5px;
  width: 20px;
  height: 20px;
  line-height: 20px;
  text-align: center;
  cursor: pointer;
}

.curPageStyle {
  background: #000;
  color: #fff;
}
</style>
